<template>
	<view>
		<view class='order-submission'>
			<view class="allAddress" style="padding-top:4rpx">
				<view class='address acea-row row-between-wrapper' @tap='onAddress'>
					<view class='addressCon' v-if="addressInfo.real_name">
						<view class='name'>{{addressInfo.real_name}}
							<text class='phone'>{{addressInfo.phone}}</text>
						</view>
						<view class="line1">
							<text class='default font-color'
								v-if="addressInfo.is_default">[默认]</text>{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}{{addressInfo.detail}}
						</view>
					</view>
					<view class='addressCon' v-else>
						<view class='setaddress'>设置收货地址</view>
					</view>
					<view class='iconfont icon-jiantou'></view>
				</view>
				<view class='line'>
					<image src='/static/images/line.jpg'></image>
				</view>
			</view>
			<view class="submission_time" v-if="cartInfo.length > 0 && cartInfo[0].productInfo.store_type != 1" style="margin-bottom: 10rpx;"> 
				<!-- 月配商品 -->
				<view class="submission_time1 acea-row row-between-wrapper" v-if="cartInfo[0].productInfo.store_type == 2">
					<text>首次{{ shippingType == 0 ? '配送' : '自提' }}时间</text>
					<text>{{ cartInfo[0].receive_time.days + ' ' + cartInfo[0].receive_time.name }}</text>
				</view>
				<!-- 自选日期商品 -->
				<view class="submission_time2 acea-row row-between-wrapper" v-if="cartInfo[0].productInfo.store_type == 3">
					<text>送达日期</text>
					<text>{{ cartInfo[0].receive_time.days + ' ' + cartInfo[0].receive_time.name }}</text>
				</view>
			</view>
			<orderGoods :cartInfo="cartInfo"></orderGoods>
			<view class='wrapper'>
				<!-- 祝福卡 -->
				<!-- <view class="greeting_card" v-if="showGreet == 1">
					<view class="greeting_hd acea-row row-between-wrapper">
						<text>祝福卡({{ bless_card_price }}元/张)</text>
						<switch 
							:checked="isGreet" 
							@change="greetingChange" 
							color="#a7cf54" 
							style="transform:scale(0.7); margin-right: -20rpx;" 
						/>
					</view>
					<view class="inp_area" v-if="isGreet">
						<textarea v-model="blessing_words" placeholder="请在此输入祝福语" style="margin-top: 15rpx;" />
						<input v-model="chenghu" placeholder="请在此输入称呼" />
					</view>
				</view> -->
				<!-- 忌讳 -->
				<view class="greeting_card" style="padding-top: 0;" v-if="showTaboo == 1">
					<view class="greeting_hd acea-row row-between-wrapper" style="padding-top: 10rpx; border-top: 1px solid #eee;">
						<text>忌讳</text>
						<switch 
							:checked="isTaboo" 
							@change="tabooChange" 
							color="#a7cf54" 
							style="transform:scale(0.7); margin-right: -20rpx;"
						/>
					</view>
					<view class="inp_area" v-if="isTaboo">
						<textarea v-model="taboo" placeholder="您有什么忌讳请写下来" style="height: 150rpx; margin-top: 15rpx;" />
					</view>
				</view>
			</view>
			<view class='moneyList'>
				<view class='item acea-row row-between-wrapper'>
					<view>商品总价：</view>
					<view class='money'>
						￥{{(parseFloat(priceGroup.sumPrice)+parseFloat(priceGroup.vipPrice)).toFixed(2)}}</view>
				</view>
				<view class='item acea-row row-between-wrapper' v-if="priceGroup.vipPrice > 0 && userInfo.vip">
					<view>会员优惠</view>
					<view class='discount'>-￥{{priceGroup.vipPrice}}</view>
				</view>
				 <!-- v-if="priceGroup.storePostage > 0" -->
				<view class='item acea-row row-between-wrapper'>
					<view>配送运费：</view>
					<view class='money'>
						￥{{(parseFloat(priceGroup.storePostage)+parseFloat(priceGroup.storePostageDiscount)).toFixed(2)}}
					</view>
				</view>
				<view class='item acea-row row-between-wrapper'>
					<view>使用兑换券：</view>
					<view class='money font-color-red'>
						-￥{{(parseFloat(priceGroup.exchangePrice)).toFixed(2)}}
					</view>
				</view>
				<view class='acea-row row-right' style="font-size: 32rpx; margin-top: 30rpx;">
					<view>实付款：</view>
					<view class='money font-color-red'>￥{{(parseFloat(priceGroup.totalPrice)).toFixed(2)}}</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between-wrapper padding30 bg-color-white" style="margin-top: 15rpx;">
				<view class="">
					<text>使用兑换券：</text>
					<text style="color: #db0d27;">{{ exchange_code }}</text>
				</view>
				<text class="iconfont icon-xiangyou"></text>
			</view>
			<view class="bnt" @click="SubOrder">确定兑换</view>
			<view style='height:120rpx;'></view>
		</view>
		<addressWindow 
			ref="addressWindow" 
			:news='news' 
			:address='address'
			:pagesUrl="pagesUrl" 
			@OnChangeAddress="OnChangeAddress" 
			@changeClose="changeClose"
		></addressWindow>
	</view>
</template>
<script>
	import {
		orderPay,
		orderConfirm,
		getCouponsOrderPrice,
		orderCreate,
		postOrderComputed
	} from '@/api/order.js';
	import {
		getAddressDefault,
		getAddressDetail,
	} from '@/api/user.js';
	import addressWindow from '@/components/addressWindow';
	import orderGoods from '@/components/orderGoods';
	import home from '@/components/home';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {
			addressWindow,
			orderGoods,
		},
		data() {
			return {
				textareaStatus: true,
				formContent: '',
				address: {
					address: false
				}, //地址组件
				addressInfo: {}, //地址信息
				
				addressId: 0, //地址id
				cartId: '', //购物车id
				userInfo: {}, //用户信息
				mark: '', //备注信息
				status: 0,
				is_address: false,
				toPay: false, //修复进入支付时页面隐藏从新刷新页面
				shippingType: 0,
				cartInfo: [],
				priceGroup: {},
				animated: false,
				totalPrice: 0,
				pagesUrl: "",
				orderKey: "",
				from: '',
				news: 1,
				isGreet: false, //祝福语开关
				showGreet: 0, //是否展示祝福卡
				isTaboo: false, // 忌讳开关
				showTaboo: 0, // 是否展示忌讳
				datetimesingle: '', // 普通商品自提时间
				ship_type: 1, // 配送方式
				blessing_words: '',
				chenghu: '',
				taboo: '',
				bless_card_price: 0, // 祝福卡价格
				week: '',
				exchange_code: '',
				exchange_id: ''
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad: function(options) {
			// #ifdef H5
			this.from = this.$wechat.isWeixin() ? 'weixin' : 'weixinh5'
			// #endif
			// #ifdef MP
			this.from = 'routine'
			// #endif
			this.addressId = options.addressId || '';
			this.cartId = options.cartId;
			if (this.isLogin && this.toPay == false) {
				this.getaddressInfo();
				this.getConfirm();
				this.$nextTick(function() {
					this.$refs.addressWindow.getAddressList();
				})
			} else {
				toLogin();
			}
		},
		methods: {
			// 祝福卡选择
			greetingChange() {
				this.isGreet = !this.isGreet
				this.computedPrice();
			},
			tabooChange() {
				this.isTaboo = !this.isTaboo
			},
			// 关闭地址弹窗；
			changeClose: function() {
				this.$set(this.address, 'address', false);
			},
			computedPrice: function() {
				let shippingType = this.shippingType;
				postOrderComputed(this.orderKey, {
					addressId: this.addressId,
					useIntegral: this.useIntegral ? 1 : 0,
					shipping_type: parseInt(shippingType) + 1,
					payType: 'exchange',
					bless_card: this.isGreet ? 1 : 0
				}).then(res => {
					let result = res.data.result;
					
					if (result) {
						this.totalPrice = result.pay_price;
						this.$set(this.priceGroup, 'storePostage', shippingType == 1 ? 0 : result.pay_postage);
						this.$set(this.priceGroup, 'storePostageDiscount', result.storePostageDiscount);
						this.$set(this.priceGroup, 'totalPrice', result.pay_price);
					}
				})
			},
			
			// 选择地址后改变事件
			OnChangeAddress: function(e) {
				this.textareaStatus = true;
				this.addressId = e;
				this.address.address = false;
				this.getaddressInfo();
				this.computedPrice();
			},
			
			// 获取当前订单详细信息
			getConfirm: function() {
				let that = this;
				orderConfirm(that.cartId, that.news).then(res => {
					that.$set(that, 'exchange_code', res.data.exchange_info.code);
					that.$set(that, 'exchange_id', res.data.exchange_info.id);
					that.$set(that, 'userInfo', res.data.userInfo);
					that.$set(that, 'cartInfo', res.data.cartInfo);
					that.$set(that, 'orderKey', res.data.orderKey);
					that.$set(that, 'bless_card_price', res.data.bless_card_price);
					that.$set(that, 'showGreet', res.data.bless_card_switch);
					res.data.cartInfo.map(el => {
						if(el.productInfo.is_taboo == 1) {
							that.$set(that, 'showTaboo', 1);
						}
					})
					that.$set(that, 'priceGroup', res.data.priceGroup);
					that.$set(that, 'totalPrice', that.$util.$h.Add(parseFloat(res.data.priceGroup.totalPrice),
						parseFloat(res.data
							.priceGroup.storePostage)));
					that.$set(that, 'ship_type', res.data.shipping_type);
					// that.$set(that, 'ChangePrice', that.totalPrice);
					if (this.addressId) {
						this.computedPrice();
					}
				}).catch(err => {
					return this.$util.Tips({
						title: err
					});
				});
			},
			
			// 获取默认收货地址或者获取某条地址信息
			getaddressInfo: function() {
				let that = this;
				if (that.addressId) {
					getAddressDetail(that.addressId).then(res => {
						res.data.is_default = parseInt(res.data.is_default);
						that.addressInfo = res.data || {};
						that.addressId = res.data.id || 0;
						that.address.addressId = res.data.id || 0;
					})
				} else {
					getAddressDefault().then(res => {
						res.data.is_default = parseInt(res.data.is_default);
						that.addressInfo = res.data || {};
						that.addressId = res.data.id || 0;
						that.address.addressId = res.data.id || 0;
					})
				}
			},
			onAddress: function() {
				let that = this;
				that.textareaStatus = false;
				that.address.address = true;
				that.pagesUrl = '/pages/users/user_address_list/index?news=' + this.news + '&cartId=' + this.cartId +
					'&pinkId=' +
					this.pinkId +
					'&couponId=' +
					this.couponId;
			},
			payment: function(data) {
				let that = this;
				orderCreate(that.orderKey, data).then(res => {
					let status = res.data.status,
						orderId = res.data.result.orderId,
						jsConfig = res.data.result.jsConfig,
						goPages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=' + res.msg +
						'&type=exchange' + '&totalPrice=' + this.totalPrice
					switch (status) {
						case 'ORDER_EXIST':
						case 'EXTEND_ORDER':
						case 'PAY_ERROR':
							uni.hideLoading();
							return that.$util.Tips({
								title: res.msg
							}, {
								tab: 5,
								url: goPages
							});
							break;
						case 'SUCCESS':
							uni.hideLoading();
							if (that.BargainId || that.combinationId || that.pinkId || that.seckillId || that
								.discountId)
								return that.$util.Tips({
									title: res.msg,
									icon: 'success'
								}, {
									tab: 4,
									url: goPages
								});
							return that.$util.Tips({
								title: res.msg,
								icon: 'success'
							}, {
								tab: 5,
								url: goPages
							});
							break;
					}
				}).catch(err => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					});
				});
			},
			SubOrder: function(e) {
				let that = this,
					data = {};
				if (!that.addressId && !that.shippingType) return that.$util.Tips({
					title: '请选择收货地址'
				});
				// if (that.isGreet == 1) {
				// 	if (that.blessing_words == "") {
				// 		return that.$util.Tips({
				// 			title: '请填写祝福语'
				// 		});
				// 	}
				// 	if (that.chenghu == "") {
				// 		return that.$util.Tips({
				// 			title: '请填写您的称呼'
				// 		});
				// 	}
				// }
				// if (that.shippingType == 1) {
				// 	if (that.storeList.length == 0) return that.$util.Tips({
				// 		title: '暂无门店,请选择其他方式'
				// 	});
				// }
				data = {
					addressId: that.addressId,
					'from': that.from, // 来源
					'new': that.news, // 是否购物车
					payType: 'exchange', // 支付类型
					shipping_type: that.$util.$h.Add(that.shippingType, 1), // 配送类型
					bless_card: that.isGreet ? '1' : '0', // 祝福卡【0=不需要，1=需要】
					blessing_words: that.blessing_words, // 祝福语
					chenghu: that.chenghu, // 称呼
					taboo: that.taboo, // 忌讳
					exchange_id: that.exchange_id, //兑换码ID
				};
				uni.showLoading({
					title: '订单兑换中'
				});
				that.payment(data);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.submission_time {
		width: 100%;
		background-color: #fff;
		padding: 20rpx 30rpx;
		color: #02A7F0;
	}
	.gift_item {
		width: 100%;
		background-color: #fff;
		padding: 0 30rpx 30rpx 180rpx;
		font-size: 24rpx;
		.line1 {
			width: 450rpx;
		}
	}
	.bg-color-white {
		background-color: #fff;
	}
	.font-color-red {
		color: #db0d27;
	}
	/deep/uni-checkbox[disabled] .uni-checkbox-input {
		background-color: #eee;
	}
	.order-submission .line {
		width: 100%;
		height: 3rpx;
	}

	.order-submission .line image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.order-submission .address {
		padding: 28rpx 30rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.order-submission .address .addressCon {
		width: 610rpx;
		font-size: 26rpx;
		color: #666;
	}

	.order-submission .address .addressCon .name {
		font-size: 30rpx;
		color: #282828;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.order-submission .address .addressCon .name .phone {
		margin-left: 50rpx;
	}

	.order-submission .address .addressCon .default {
		margin-right: 12rpx;
	}

	.order-submission .address .addressCon .setaddress {
		color: #333;
		font-size: 28rpx;
	}

	.order-submission .address .iconfont {
		font-size: 35rpx;
		color: #707070;
	}

	.order-submission .allAddress .nav {
		width: 710rpx;
		margin: 0 auto;
	}

	.order-submission .allAddress .nav .item {
		width: 355rpx;
		color: #a5ce50;
	}

	.order-submission .allAddress .nav .item.on {
		position: relative;
		width: 250rpx;
	}
	.order-submission .allAddress {
		margin-bottom: 15rpx;
	}
	.order-submission .allAddress .address {
		width: 100%;
		height: 150rpx;
		margin: 0 auto;
	}

	.order-submission .allAddress .line {
		width: 100%;
		margin: 0 auto;
	}

	.order-submission .wrapper .item .discount .placeholder {
		color: #ccc;
	}
	
	.order-submission .moneyList {
		margin-top: 12rpx;
		background-color: #fff;
		padding: 30rpx;
	}
	
	.order-submission .moneyList .item {
		font-size: 28rpx;
		color: #282828;
	}
	
	.order-submission .moneyList .item~.item {
		margin-top: 20rpx;
	}
	
	.order-submission .moneyList .item .money {
		color: #868686;
	}
	
	.order-submission .wrapper {
		background-color: #fff;
		margin-top: 13rpx;
	}
	.text-red{ 
		color: #F62C2C;
	}
	.order-submission .wrapper .item {
		padding: 27rpx 30rpx;
		font-size: 30rpx;
		color: #282828;
		border-bottom: 1px solid #f0f0f0;
	}

	.order-submission .wrapper .item .discount {
		font-size: 30rpx;
		color: #999;
	}

	.order-submission .wrapper .item .discount input {
		text-align: end;
	}

	.order-submission .wrapper .item .discount .iconfont {
		color: #515151;
		font-size: 30rpx;
		margin-left: 15rpx;
	}

	.order-submission .wrapper .item .discount .num {
		font-size: 32rpx;
		margin-right: 20rpx;
	}

	.order-submission .wrapper .item .shipping {
		font-size: 30rpx;
		color: #999;
		position: relative;
		padding-right: 58rpx;
	}

	.order-submission .wrapper .item .shipping .iconfont {
		font-size: 35rpx;
		color: #707070;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 30rpx;
	}

	.order-submission .wrapper .item textarea {
		background-color: #f9f9f9;
		width: 690rpx;
		height: 140rpx;
		border-radius: 3rpx;
		margin-top: 30rpx;
		padding: 25rpx 28rpx;
		box-sizing: border-box;
	}
	
	.order-submission .footer {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.order-submission .footer .settlement {
		font-size: 30rpx;
		color: #fff;
		width: 240rpx;
		height: 70rpx;
		background-color: #a7cf54;
		border-radius: 50rpx;
		text-align: center;
		line-height: 70rpx;
	}

	.footer .transparent {
		opacity: 0
	}
	.bnt {
		width: 93%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background-color: #95C51B;
		color: #fff;
		font-size: 30rpx;
		margin: 50rpx auto 0;
		border-radius: 10rpx;
	}
	.greeting_card {
		width: 100%;
		padding: 20rpx 30rpx;
		.greeting_hd {
			width: 100%;
		}
		textarea, input {
			width: 100%;
			background-color: #f8f8f8;
			margin-bottom: 10rpx;
			text-align: center;
			border-radius: 10rpx;
			box-sizing: border-box;
		}
		textarea {
			display: flex;
			align-items: center;
			height: 180rpx;
			padding: 0 20rpx 20rpx;
		}
		input {
			height: 90rpx;
			padding: 0 20rpx;
			margin-bottom: 0;
		}
	}
	
</style>